const ghbtn = document.querySelector('.g-h-btn');
const gh = document.querySelector('.g-h');
const flo =document.querySelector('.f-l-o');
const tab = document.querySelector('.tab');
const tabot = document.querySelector('.tabot');
const tabots = document.querySelector('.tabot-s');
const tabulp = document.querySelector('.tabulp');
const tablif = document.querySelector('.tabli-f');
const tablis = document.querySelector('.tabli-s');
const titf = document.querySelector('.titf');
const tits = document.querySelector('.tits');
const lis1 = document.querySelector('.lis1');
const li1 = lis1.children;
const lis2 = document.querySelector('.lis2');
const li2 = lis2.children;
const lis3 = document.querySelector('.lis3');
const li3 = lis3.children;
const lis4 = document.querySelector('.lis4');
const li4 = lis4.children;
const lis5 = document.querySelector('.lis5');
const li5 = lis5.children;
const lis6 = document.querySelector('.lis6');
const li6 = lis6.children;
const lis7 = document.querySelector('.lis7');
const li7 = lis7.children;
const slis1 = document.querySelector('.slis1');
const sli1 = slis1.children;
const slis2 = document.querySelector('.slis2');
const sli2 = slis2.children;
const slis3 = document.querySelector('.slis3');
const sli3 = slis3.children;
const slis4 = document.querySelector('.slis4');
const sli4 = slis4.children;
const slis5 = document.querySelector('.slis5');
const sli5 = slis5.children;
const slis6 = document.querySelector('.slis6');
const sli6 = slis6.children;
const slis7 = document.querySelector('.slis7');
const sli7 = slis7.children;
const w = document.querySelector('.w');
const y = document.querySelector('.y');
const ffs = document.querySelector('.ffs');
const f2show = document.querySelector('.f2-show');
const fff = document.querySelector('.fff');
const f1show = document.querySelector('.f1-show');
ghbtn.addEventListener('click',function(){
    gh.style.display = 'none';
});
flo.addEventListener('mouseenter',function(){
    tab.style.display = 'block';
    tabot.style.displsy = 'block';
    tablis.className = 'tabli-s tab-g2';
    for(let i = 0;i < li1.length;i++){
        li1[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li1[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li1[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li2.length;i++){
        li2[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li2[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li2[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li3.length;i++){
        li3[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li3[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li3[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li4.length;i++){
        li4[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li4[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li4[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li5.length;i++){
        li5[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li5[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li5[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li6.length;i++){
        li6[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li6[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li6[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li7.length;i++){
        li7[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li7[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li7[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    tablis.addEventListener('mouseenter',function(){
        this.className = 'tabli-s tab-g1';
        tablif.className = 'tabli-f tab-g2';
        tablif.style.border = '1px solid #d6d6d6';
        tablif.style.borderBottom = '1px solid rgb(32, 82, 158)';
        tabot.style.display = 'none';
        tabots.style.display = 'block';
        tits.style.color = '1px solid rgb(32, 82, 158)';
        for(let i = 0;i < sli1.length;i++){
            sli1[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli1[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli1[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli2.length;i++){
            sli2[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli2[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli2[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli3.length;i++){
            sli3[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli3[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli3[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli4.length;i++){
            sli4[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli4[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli4[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli5.length;i++){
            sli5[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli5[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli5[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli6.length;i++){
            sli6[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli6[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli6[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli7.length;i++){
            sli7[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli7[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli7[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
    });
    tablif.addEventListener('mouseenter',function(){
        this.className = 'tabli-f tab-g1';
        tabot.style.display = 'block';
        tabots.style.display = 'none';
        tablis.className = 'tabli-s tab-g2';
        this.style.borderTop  = '1px solid rgb(32, 82, 158)';
        this.style.borderLeft = '1px solid rgb(32, 82, 158)';
        this.style.borderRight  = '1px solid rgb(32, 82, 158)';
        this.style.borderBottom = '1px solid #fff';
        this.style.color = '1px solid rgb(32, 82, 158)';
        // this.className = 'tabli-f tab-g1';
        for(let i = 0;i < li1.length;i++){
            li1[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li1[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li1[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li2.length;i++){
            li2[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li2[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li2[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li3.length;i++){
            li3[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li3[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li3[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li4.length;i++){
            li4[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li4[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li4[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li5.length;i++){
            li5[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li5[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li5[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li6.length;i++){
            li6[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li6[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li6[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li7.length;i++){
            li7[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li7[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li7[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
    })

});
flo.addEventListener('mouseleave',function(){
    tab.style.display = 'none';
});
tab.addEventListener('mouseenter',function(){
    tab.style.display = 'block';
});
tab.addEventListener('mouseleave',function(){
    tab.style.display = 'none';
});
tabulp.addEventListener('click',function(){
    tab.style.display = 'none';
})
fff.onmouseenter = function(){
    f1show.style.display = 'block';
}
ffs.onmouseenter = function(){
    f2show.style.display = 'block';
}
fff.onmouseleave = function(){
    f1show.style.display = 'none';
}
ffs.onmouseleave = function(){
    f2show.style.display = 'none';
}

class Banner {
    constructor(index){
        this.imgbox = document.querySelector('.imgzong');
        this.left = document.querySelector('.banner-btn1');
        this.right = document.querySelector('.banner-btn2');
        this.banul = document.querySelector('.banner-ul');
        this.banlis= this.banul.children;
        this.imgs = this.imgbox.children;
        this.index = index;
        this.first = this.imgs[0].cloneNode(true);
        this.imgbox.appendChild(this.first);
        this.imgbox.style.width = this.imgs[0].offsetWidth * this.imgs.length + 'px';
        this.idx = 0;
        this.circle();
        this.cr = 0;
        this.addEvent();
    }
    circle(){
        for(let i = 0;i < this.imgs.length-1;i++){
            this.banuli = document.createElement('li');
            this.banul.appendChild(this.banuli);
            this.banlis = this.banul.children;
            this.banlis[i].className = 'banner-ullis';
            let that = this;
            this.banlis[i].onmouseenter = function(){
                that.banlis[i].className = 'banner-ullis1';
            }
            this.banlis[i].onmouseleave = function(){
                that.banlis[i].className = 'banner-ullis';
            }
            this.idx = i;
            this.banlis[i].onclick = function(){
                that.changerightIdx();
                that.banlis.className = 'banner-ullis';
                that.banlis[i].className = 'banner-ullis1';
            }
        }
        let that = this;
        this.timer = setInterval(function(){
            that.right.click();
        },2500);
    }

    changerightIdx(){
        if(this.idx === this.imgs.length-2){
            this.idx = 0; 
            this.imgbox.style.left = 0;
        }else {
            this.idx ++;
        }
        this.index = this.idx;
        this.changeIndexRight();
        this.index = this.idx;
        this.changeIndexLeft();
        this.cr = this.idx;
        this.addEvent();
    }
    addEvent(){
        let cir = 0;
        let that = this;
        cir = this.cr;
       this.rightclick();
        this.left.onclick = function(){
            that.banlis= that.banul.children;
            that.changeIndexLeft();
            if(cir === 0 ){
                cir = that.imgs.length -2;
            }else{cir--}
            for(let cir = 0 ;cir < that.imgs.length-1;cir++){
                that.banlis[cir].className = 'banner-ullis';
            }
            that.banlis[cir].className = 'banner-ullis1';
        }
        
    }
    rightclick(){
        let cir = 0;
        let that = this;
        cir = this.cr;
        this.right.addEventListener('click', function(){
            that.banlis= that.banul.children;
            that.changeIndexRight();
            if(cir === that.imgs.length-2){
                cir = 0;
            }else{
                cir++;
            }
            for(let cir= 0 ;cir < that.imgs.length-1;cir++){
                that.banlis[cir].className = 'banner-ullis';
            }
             that.banlis[cir].className = 'banner-ullis1';
        })
    }
        
    
    changeIndexRight(){ 
        if(this.index === this.imgs.length-1){
            this.index = 1;
            this.imgbox.style.left = 0;
        }else {
            this.index ++;
        }
        this.ChangeimgLocal();
    }
    changeIndexLeft() {
        if(this.index === 0){
            this.index = this.imgs.length-1;
            this.index = this.index -1;
            this.imgbox.style.left = -(this.imgs.length-1) * this.imgs[0].offsetWidth + 'px';
        }else{
            this.index--;
        }
        this.ChangeimgLocal();
    }

  
    ChangeimgLocal(){
        move(this.imgbox,{
            left: -this.index * this.imgs[0].offsetWidth 
        })
    }  
 
}
new Banner(0);
